<template>
  <div class="car">
    <div class="cardetails">
      <div class="carcontent">
        <p class="cartitle">交通工具信息</p>
        <div class="contentitem">
          <div>交通工具名称：</div>
          <div>车牌号：</div>
          <div>型号：</div>
          <div>颜色：</div>
          <div>所有人姓名：</div>
          <div>所属寺庙：</div>
        </div>
      </div>
      <div class="carcontent">
        <p class="cartitle">车辆特征</p>
        <div class="contentitem">车辆特征</div>
      </div>
      <div class="carcontent">
        <p class="cartitle">车辆照片</p>
        <div class="contentitem">
          <img class="item_img" src="../../images/bg.png" alt="" srcset="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    //  获取id
    const id = this.$route.query.id;
    console.log(id);
  },
};
</script>

<style scoped>
.car {
  padding-top: 0.260417rem /* 50/192 */;
  background: url("../../images/bg.png") no-repeat;
  width: 10rem;
  background-size: 100% 100%;
  /* background-size: cover; */
  position: fixed;
  height: 100%;
}
.cardetails {
  width: 5.208333rem /* 1000/192 */;
  height: 3.328125rem /* 639/192 */;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.072917rem /* 14/192 */;
  color: #333333;
  padding-bottom: 0.260417rem;
  margin: 0 auto;
  overflow-y: scroll;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.cartitle {
  font-size: 0.104167rem /* 20/192 */;
  padding: 0.302083rem /* 58/192 */ 0 0.130208rem /* 25/192 */ 0.302083rem
    /* 58/192 */;
  color: #066ac6;
  font-family: "Microsoft YaHei", "Microsoft YaHei-Normal";
}

.contentitem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.072917rem /* 14/192 */;
  color: #999ba4;
  margin: 0 0.302083rem /* 58/192 */;
  flex-wrap: wrap;
}

.item_img {
  width: 2.109375rem /* 405/192 */;
  height: 1.333333rem /* 256/192 */;
}
</style>